<template>
  <!-- 侧边布局 -->
  <SideMenuLayout
    v-if="pageLayout == 'sidemenu' && isRouterAlive"
    @showSettingDrawer="showSettingDrawer"
  ></SideMenuLayout>
  <!-- 顶部布局 -->
  <TopMenuLayout
    v-if="pageLayout == 'topmenu' && isRouterAlive"
    @showSettingDrawer="showSettingDrawer"
  ></TopMenuLayout>
  <!-- 系统设置抽屉 -->
  <el-drawer
    direction="rtl"
    :size="350"
    :with-header="false"
    v-model="settingDrawerVisible"
    custom-class="sys-setting-drawer"
  >
    <el-container class="sys-setting-layout">
      <el-header class="title">系统设置</el-header>
      <el-main>
        <el-scrollbar>
          <el-space direction="vertical" class="space">
            <el-card class="box-card">
              <template #header>
                <el-tooltip
                  class="item"
                  effect="light"
                  content="纯白、黑色导航"
                  placement="left"
                >
                  <span>整体风格</span>
                </el-tooltip>
              </template>
              <el-radio-group v-model="tStyle" @change="themeStyleChange">
                <el-radio label="1">
                  <div class="theme-style">
                    <span></span>
                  </div>
                </el-radio>
                <el-radio label="2">
                  <div class="theme-style theme-style-dark">
                    <span></span>
                  </div>
                </el-radio>
              </el-radio-group>
            </el-card>
            <el-card class="box-card">
              <template #header>
                <el-tooltip
                  class="item"
                  effect="light"
                  content="侧边导航、头部导航"
                  placement="left"
                >
                  <span>导航模式</span>
                </el-tooltip>
              </template>
              <el-radio-group v-model="layout" @change="layoutChange">
                <el-radio label="sidemenu">
                  <div class="theme-style theme-style-dark">
                    <span></span>
                  </div>
                </el-radio>
                <el-radio label="topmenu">
                  <div class="theme-style theme-style-dark theme-style-top">
                    <span></span>
                  </div>
                </el-radio>
              </el-radio-group>
            </el-card>
            <el-card class="box-card">
              <template #header>
                <el-tooltip
                  class="item"
                  effect="light"
                  content="改变按钮、表单等组件的大小"
                  placement="left"
                >
                  <span>主题大小</span>
                </el-tooltip>
              </template>
              <el-radio-group v-model="tSize" @change="themeSizeChange">
                <el-radio label="medium">中等</el-radio>
                <el-radio label="small ">小</el-radio>
                <el-radio label="mini">超小</el-radio>
              </el-radio-group>
            </el-card>
            <el-card class="box-card">
              <template #header>
                <el-tooltip
                  class="item"
                  effect="light"
                  content="主要改变主题主颜色，次颜色不改变"
                  placement="left"
                >
                  <span>主题颜色</span>
                </el-tooltip>
              </template>
              <p>预设颜色</p>
              <el-row class="ysrow">
                <el-col :span="3" class="yscol">
                  <div
                    class="ysitem"
                    style="background: #409eff"
                    @click="setTColor('#409eff')"
                  ></div>
                </el-col>
                <el-col :span="3" class="yscol">
                  <div
                    class="ysitem"
                    style="background: #e23c39"
                    @click="setTColor('#e23c39')"
                  ></div>
                </el-col>
                <el-col :span="3" class="yscol">
                  <div
                    class="ysitem"
                    style="background: #e96033"
                    @click="setTColor('#e96033')"
                  ></div>
                </el-col>
                <el-col :span="3" class="yscol">
                  <div
                    class="ysitem"
                    style="background: #f0af41"
                    @click="setTColor('#f0af41')"
                  ></div>
                </el-col>
                <el-col :span="3" class="yscol">
                  <div
                    class="ysitem"
                    style="background: #58bfc1"
                    @click="setTColor('#58bfc1')"
                  ></div>
                </el-col>
                <el-col :span="3" class="yscol">
                  <div
                    class="ysitem"
                    style="background: #72c140"
                    @click="setTColor('#72c140')"
                  ></div>
                </el-col>
                <el-col :span="3" class="yscol">
                  <div
                    class="ysitem"
                    style="background: #3258e3"
                    @click="setTColor('#3258e3')"
                  ></div>
                </el-col>
                <el-col :span="3" class="yscol">
                  <div
                    class="ysitem"
                    style="background: #6839c9"
                    @click="setTColor('#6839c9')"
                  ></div>
                </el-col>
              </el-row>
              <p>自定义颜色</p>
              <el-color-picker
                v-model="tColor"
                @change="themeColorChange"
              ></el-color-picker>
            </el-card>
          </el-space>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-drawer>
</template>

<script>
  import { getUserinfo } from '@/api/user'
  import { notification, writeNewStyle } from '@/utils'
  import { mapGetters, mapMutations } from 'vuex'
  import SideMenuLayout from './SideMenuLayout'
  import TopMenuLayout from './TopMenuLayout'
  export default {
    name: 'Layout', // 模块描述
    components: { SideMenuLayout, TopMenuLayout },
    props: {},
    data() {
      return {
        isRouterAlive: true,
        settingDrawerVisible: false,
        layout: 'sidemenu',
        tColor: '#409eff',
        tStyle: '1',
        tSize: 'mini',
      }
    },
    // 计算属性
    computed: {
      ...mapGetters({
        username: 'user/username',
        accessToken: 'user/accessToken',
        themeStyle: 'user/themeStyle',
        themeSize: 'user/themeSize',
        pageLayout: 'user/pageLayout',
        themeColor: 'user/themeColor',
      }),
    },
    async created() {
      this.layout = this.pageLayout
      this.tColor = this.themeColor
      this.tStyle = this.themeStyle
      this.tSize = this.themeSize
      // 切换主题颜色
      this.themeColorChange()
      // 切换主题大小
      Object.assign(this.$ELEMENT, { size: this.tSize })
      // 获取用户信息
      const { userInfo } = await getUserinfo(this.accessToken)
      this.setUserName(userInfo.name)
      const hour = new Date().getHours()
      const thisTime =
        hour < 8
          ? '早上好'
          : hour <= 11
          ? '上午好'
          : hour <= 13
          ? '中午好'
          : hour < 18
          ? '下午好'
          : '晚上好'
      notification(this.username + ',欢迎登录', thisTime + '！')
    },
    methods: {
      ...mapMutations({
        setPageLayout: 'user/setPageLayout',
        setThemeStyle: 'user/setThemeStyle',
        setThemeSize: 'user/setThemeSize',
        setThemeColor: 'user/setThemeColor',
        setUserName: 'user/setUserName',
      }),
      // 刷新页面
      pageReload() {
        this.isRouterAlive = false
        this.$nextTick(function () {
          this.isRouterAlive = true
        })
      },
      // 显示系统设置抽屉
      showSettingDrawer() {
        this.settingDrawerVisible = true
      },
      // 主题风格改变
      themeStyleChange() {
        this.setThemeStyle(this.tStyle)
      },
      // 主题大小改变
      themeSizeChange() {
        Object.assign(this.$ELEMENT, { size: this.tSize })
        this.setThemeSize(this.tSize)
        this.pageReload() // 需要刷新页面才能显示
      },
      // 布局改变
      layoutChange() {
        this.setPageLayout(this.layout)
      },
      // 设置主题颜色
      setTColor(tColor) {
        this.tColor = tColor
        this.themeColorChange()
      },
      // 主题颜色改变
      themeColorChange() {
        if (!this.tColor) {
          return
        }
        // 设置颜色
        this.setThemeColor(this.tColor)
        // 写入新样式
        writeNewStyle(this.tColor)
      },
    },
  }
</script>

<style lang="scss">
  .sys-setting-drawer {
    .el-drawer__body {
      height: 100%;
      .sys-setting-layout {
        height: 100%;
        .title {
          height: 48px;
          line-height: 48px;
          text-align: center;
        }
        .el-main {
          padding: 0;
          .space {
            width: 100%;
            .box-card {
              width: 300px;
              .theme-style {
                display: inline-block;
                vertical-align: middle;
                position: relative;
                width: 44px;
                height: 36px;
                margin-right: 16px;
                overflow: hidden;
                background-color: #f0f2f5;
                border-radius: 4px;
                box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
                cursor: pointer;
                ::before {
                  position: absolute;
                  top: 0;
                  left: 0;
                  z-index: 1;
                  width: 33%;
                  height: 100%;
                  background-color: #fff;
                  content: '';
                }
                ::after {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 25%;
                  background-color: #fff;
                  content: '';
                }
              }
              .theme-style-dark ::before {
                background-color: #000;
              }
              .theme-style-top ::before {
                width: 100%;
                height: 25%;
              }
              .ysrow {
                margin-bottom: 14px;
                .yscol {
                  .ysitem {
                    width: 20px;
                    height: 20px;
                    border-radius: 3px;
                    margin-right: 5px;
                    cursor: pointer;
                  }
                }
              }
              .el-color-picker {
                width: 100%;
                .el-color-picker__trigger {
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
